<template>
    <div>
      <el-dialog
      :title="NewTodo.id ? '待办详情' : '新建待办'"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      @open="init(item)"
      width="45%"
      top="20"
      id="Dialog"
    >
        <el-form
        :model="NewTodo"
        ref="NewTodo"
        :rules="Rule"
        label-width="100px"
        >
            <el-form-item prop="title" label="待办事项" style="width: 100%">
              <el-input v-model="NewTodo.title" placeholder="新建待办" :disabled="Disabled"></el-input>
            </el-form-item>
            <el-form-item prop="end" label="截至时间" style="width: 100%">
              <el-date-picker
                v-model="NewTodo.end"
                type="datetime"
                :disabled="Disabled"
                placeholder="设置截至时间"
                style="width: 100%">
              </el-date-picker>
            </el-form-item>
            <el-form-item prop="content" label="备注" style="width: 100%">
              <el-input
                type="textarea"
                maxlength="100"
                show-word-limit
                placeholder="请输入备注说明"
                :disabled="Disabled"
                v-model="NewTodo.content"
                style="width: 100%"
              >
              </el-input>
            </el-form-item>
            <el-form-item prop="creator" label="创建者" v-if="NewTodo.id ? true : false" style="width: 100%" :disabled="Disabled">
                <el-input v-model="NewTodo.creator" disabledshowaddParticipants></el-input>
            </el-form-item>
            <el-form-item label="参与人员" style="width: 100%" :disabled="Disabled">
              <div
                  style="width:98%;height:5vh;display:flex;justify-content:space-between;overflow:hidden"
                >
                  <el-button
                    @click="openaddpar()"
                    style="width: 4vw; height: 40px; color: #C0C4CC;"
                    :disabled="Disable"
                  >
                    新增
                  </el-button>
                  <div
                    style="backgroundColor:#F5F7FA;width:85%;height:4.7vh;overflow-x:auto"
                  >
                    <el-button
                    style="height:4.5vh"
                      v-for="item in NewTodo.participants"
                      :key="item.id"
                    >
                      {{item.name}}
                    </el-button>
                  </div>
                </div>
            </el-form-item>
            <el-form-item label="讨论:" style="display: block; width: 100%; border-bottom: 1px solid #DEE1E6" v-if="NewTodo.id ? true : false">
            </el-form-item>
            <el-form-item class="parentForm" v-if="NewTodo.id ? true : false" style="width: 100%">
                <div class="childDiv">
                    <div v-for="item in NewTodo.review" :key="item.id">
                        <p id="p">
                            <el-avatar size="medium" id="headimg" :src="item.header"></el-avatar>
                            <span id="Name">{{item.name}}</span>
                            <span id="time">{{item.createTime}}</span>
                        </p>
                        <p id="Content" :title="item.content">{{item.content}}</p>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label-width="0" v-if="NewTodo.id ? true : false">
                <el-input v-model="NewTodo.addreview" placeholder="请输入评论" :disabled="Disabled" @keyup.enter.native="addreview(NewTodo)"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="Disabled = false" v-if="NewTodo.id && Disabled === true">编辑</el-button>
            <el-button type="primary" @click="dialogVisible = false" v-else-if="NewTodo.id && Disabled === false">确定</el-button>
            <el-button type="primary" @click="addTodo(NewTodo)" v-else>新建</el-button>
        </span>
    </el-dialog>
     <!-- 新增参与者弹窗 start -->
      <el-dialog
        :visible.sync="addpardialogVisible"
        :close-on-click-modal="false"
        top="20px"
        width="40%"
        style="height: 800px; overflow-y: hidden"
        class="addpar"
      >
        <el-input
          type="text"
          v-model="search_pro"
          suffix-icon="el-icon-search"
          placeholder="请输入查询姓名"
          @keyup.enter.native="queryParticipant()"
        >
        </el-input>
        <div class="BTN">
          <el-button
            icon="el-icon-close"
            v-for="(item, index) in participateEmp"
            :key="item.id"
            @click="deleteems(index)"
          >
            {{item.name}}
          </el-button>
        </div>
        <div class="cards">
          <el-card
            v-for="(item, index) in emsList"
            :key="index"
            style="margin-top: 10px"
            :body-style="{width: '96%', display: 'flex', justifyContent: 'space-between', padding: '5px'}"
            @click.native="addems(item)"
          >
            <div class="left">
              <el-avatar shape="square" :size="60" :src="item.header"></el-avatar>
            </div>
            <div class="right">
              <span class="right-left">
                {{item.name}}
                <p style="height: 5px"></p>
                {{item.address}}
              </span>
              <span class="right-right">
                职位：{{item.position.name}}
                <p style="height: 5px"></p>
                部门：{{item.department.name}}
              </span>
            </div>
          </el-card>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="canceladd()">取消</el-button>
          <el-button type="primary" @click="confirmadd()">确定</el-button>
        </span>
      </el-dialog>
      <!-- 新增参与者弹窗 end -->
    </div>
</template>

<script>
import { copy } from '../../utils/common'
export default {
  name: 'AddTodo',
  data() {
    return {
      dialogVisible: false, // 新增待办弹窗
      NewTodo: {}, // 新增待办表单
      review: [], // 评论
      Disabled: true,
      search_pro: '', // 参与者搜索框
      addpardialogVisible: false, // 新增参与者弹窗
      participateEmp: [], // 新增参与者弹窗操作的参与者数组
      emsList: [], // 新增参与者弹窗 获取的员工信息数组
      Rule: {
        title: [
          { required: true, message: '待办不能为空', trigger: 'blur' }
        ]
      },
      Item: {}
    }
  },
  components: {
    // AddParticipants: resolve => require(['../Schedule/AddParticipants'], resolve)
  },
  props: {
    getparenttodo: Function // 刷新父组件的待办
  },
  methods: {
    // 获取准确查询后的参与者信息
    queryParticipant() {
      var page = 1
      var size = 10
      var url = '/admin/emp/?currentPage=' + page + '&size=' + size
      if (this.search_pro) {
        url = url + '&name=' + this.search_pro
        this.getRequest(url).then(resp => {
          this.emsList = resp.data
          console.log(this.emsList)
        })
      } else {
        this.$message.error('请输入查询名字')
      }
    },
    // 确定添加
    confirmadd() {
      this.addpardialogVisible = false
      this.NewTodo.participants = copy(this.participateEmp)
    },
    // 取消添加
    canceladd() {
      this.addpardialogVisible = false
    },
    // 将选中的参与者添加进participateEmp
    addems(item) {
      var len = this.participateEmp.length
      var count = 0
      for (var i = 0; i < len; i++) {
        if (this.participateEmp[i].id === item.id && this.participateEmp[i].name === item.name) break
        else count++
      }
      // 说明前面无相同数据
      if (count === len) {
        this.participateEmp.push({
          id: item.id,
          name: item.name
        })
      }
    },
    // 获取员工数据传入emsList
    getemsList() {
      var page = 1
      var size = 10
      this.getRequest(`admin/emp/${page}/${size}`).then(resp => {
        if (resp) {
          this.emsList = resp.list
          console.log('this.emsList', this.emsList)
        }
      })
    },
    // 取消参与者，从participateEmp中移除
    deleteems(index) {
      this.participateEmp.splice(index, 1)
    },
    // 打开新增参与者弹框
    openaddpar() {
      this.addpardialogVisible = true
      this.participateEmp = copy(this.NewTodo.participants)
      this.getemsList()
    },
    // 初始化新增弹窗
    init(item) {
      this.dialogVisible = true
      this.Item = item
      if (!item.id) {
        this.Disabled = false
        this.NewTodo = {
          id: 0,
          title: '',
          start: '',
          end: '',
          content: '',
          creator: '',
          participants: []
        }
      } else {
        this.Disabled = true
        // 获取评论
        this.getRequest(`/todo/remark/${item.id}`).then(resp => {
          if (resp) {
            console.log(resp.data)
            this.review = resp.data
            this.NewTodo = {
              id: item.id,
              title: item.title,
              start: item.start,
              end: item.end,
              content: item.content,
              creator: item.creator,
              participants: item.participants,
              review: this.review,
              addreview: ''
            }
          }
        })
      }
    },
    // 转换时间格式 yyyy-mm-dd hh-MM-SS
    getDay(date) {
      var day = new Date(date)
      var y = day.getFullYear()
      y = y < 10 ? ('0' + y) : y
      var m = day.getMonth()
      m = m < 10 ? ('0' + m) : m + 1
      var d = day.getDate()
      d = d < 10 ? ('0' + d) : d
      var H = day.getHours()
      H = H < 10 ? ('0' + H) : H
      var M = day.getMinutes()
      M = M < 10 ? ('0' + M) : M
      var S = day.getSeconds()
      S = S < 10 ? ('0' + S) : S
      return y + '-' + m + '-' + d + ' ' + H + ':' + M + ':' + S
    },
    // 转换参与者
    getParticipants(list) {
      var array = []
      list.forEach(item => {
        array.push(item.id)
      })
      return array
    },
    // 新增待办
    addTodo(todo) {
      this.$refs.NewTodo.validate(valid => {
        if (valid) {
          var list = {
            title: todo.title,
            content: todo.content,
            endTime: this.getDay(todo.end),
            eIds: this.getParticipants(todo.participants)
          }
          this.postRequest('/todo/', list).then(resp => {
            if (resp) {
              // console.log('新增成功')
              this.dialogVisible = false
            }
          }, error => console.log(error))
        }
      })
    },
    // 添加评论
    addreview(NewTodo) {
      var form = {
        content: NewTodo.addreview,
        tid: NewTodo.id
      }
      // console.log(form)
      this.postRequest('/todo/remark', form).then(resp => {
        if (resp) {
          this.dialogVisible = false
          // console.log(resp.msg)
          // this.init(this.Item)
          // this.$forceUpdate()
        }
      }, error => console.log(error))
    }
  }
}
</script>

<style>
@import '../../assets/css/form.css';
#Dialog {
  left: 10vw;
  top: 2vh;
}
#p {
  display: flex;
  flex-wrap: nowrap;
  /* background-color: yellow; */
}
#headimg {
  display: inline-block;
  /* background-color: violet; */
}
#Name {
  display: inline-block;
  height: 30px;
  font-family: '宋体';
  font-size: 17px;
  margin: 0 5px 0 5px;
}
#time {
  position: relative;
  left: 12vw;
  font-family: '宋体';
  font-size: 16px;
}
#Content {
  /* display: inline-block; */
  width: 26vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 10px;
  font-family: '宋体';
  font-size: 17px;
}
.parentForm {
  height: 15vh;
  /* background-color: turquoise; */
  overflow: hidden;
}
.childDiv {
  height: 15vh;
  overflow-y: auto;
}
/* .el-dialog__body {
  padding-bottom: 0px !important;
}
.el-dialog__footer {
  padding-bottom: 1px !important;
  padding-top: 1px !important;
} */
#partname {
  width: 100%;
  background-color: turquoise !important;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
/**=============================== 新增参与者 start ================================*/
.addpar .cards {
  width: 96%;
  height: 400px;
  height: 50vh;
  overflow-y: auto;
}
.addpar .cards::-webkit-scrollbar {
  display: none;
}
.addpar .el-card:hover {
  cursor: pointer;
  width: 97%;
  height: 72px;
  background-color: rgba(236,245,255);
}
.addpar .left {
  display: inline-block;
  width: 60px;
  height: 60px;
}
.addpar .right {
  display: inline-block;
  display: flex;
  width: 100%;
  height: 50px;
  padding: 5px;
  font-size: 18px;
}
.addpar .right-left {
  display: inline-block;
  width: 500px;
  height: 50px;
}
.addpar .right-right {
  display: inline-block;
  width: 100%;
  height: 50px;
  text-align: center;
}
.addpar .BTN {
  width: 100%;
  height: 10vh;
  overflow-y: auto;
}
.addpar .BTN .el-button {
  width: 6vw;
  height: 5vh;
  margin-top: 1vh;
  margin-left: 0px;
  margin-right: 10px;
}
</style>
